// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import type { State } from 'store';
import type { UserData } from 'store/modules/user';
import { AuthActions, BaseActions } from 'store/actionCreators';
import LoginForm from 'components/Login/LoginForm';
import storage, { keys } from 'lib/storage';
import Qs from 'qs';
import * as social from 'lib/socialAuth';

type Props = {
    username: string,
    windowName: string,
    email: string,
    isSending: boolean,
    isUser: boolean,
    isEmailSended: boolean
};

class LoginFormContainer extends Component<Props> {
    constructor(props: Props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onSendVerification = this.onSendVerification.bind(this);
        this.onEnterKeyPress = this.onEnterKeyPress.bind(this);
        this.onSocialLogin = this.onSocialLogin.bind(this);
        this.timer = null;
        this.wd = null;
    }
    onChange = (event: SyntheticInputEvent) => {
        console.log(event.target.value);
        AuthActions.setEmailInput(event.target.value);
    };
    onSendVerification = () => {
        const { email, windowName } = this.props;
        if (email === null || email === '') {
            alert('请输入E-mail地址!');
            // email.focus();
            return;
        }
        var regExp = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        if (!regExp.test(email)) {
            alert('您输入的E-mail地址不正确!');
            // email.focus();
            return;
        }
        BaseActions.setWindowNameRequest({
            windowName: this.props.windowName,
            provider: 'email'
        });
        AuthActions.sendAuthEmailRequest({ windowName: windowName, email: email });
    };
    // xiaoi2008@yeah.net
    onEnterKeyPress = () => {
        // AuthActions.SendVerificationEmail(this.props.windowName, this.props.email);
    };
    onSocialLogin = provider => {
        BaseActions.setWindowNameRequest({
            windowName: this.props.windowName,
            provider: provider
        });
        BaseActions.enterLanding();
        BaseActions.setLandingType('fullscreen');
        const popConfig = social.login(this.props.windowName, provider, 'email');
        const wd = window.open(popConfig.url, '_blank', popConfig.featuresStr);
        console.log('windowname::' + this.props.windowName);
        wd.name = this.props.windowName;
        wd.focus();

        const timer = window.setInterval(() => {
            // console.log(wd);
            if (wd.closed) {
                window.clearInterval(timer);
                //退出授权框
                BaseActions.exitLanding();
                //
                AuthActions.socailCodeLoginRequest({
                    windowName: this.props.windowName,
                    provider: provider
                });
            }
        }, 100);
    };
    render() {
        return (
            <LoginForm
                onChange={this.onChange}
                onSendVerification={this.onSendVerification}
                onEnterKeyPress={this.onEnterKeyPress}
                onSocialLogin={this.onSocialLogin}
                sentEmail={this.props.sentEmail}
                sending={this.props.sending}
            />
        );
    }
}
// 把store导入Pros
const mapStatetoProps = ({ base, auth }: State) => {
    return {
        windowName: base.windowName,
        email: auth.email,
        sentEmail: auth.sentEmail,
        sending: auth.sending,
        isUser: auth.isUser
    };
};

const mapDispatchtoProps = () => ({});
export default connect(
    mapStatetoProps,
    mapDispatchtoProps
)(LoginFormContainer);
